// 拿到登录信息渲染修改页面
const uname = document.querySelector('#uname') //昵称表单
const cell = document.querySelector('#cell')  //电话表单
const btnImg = document.querySelector('#btnImg') //图片
const form = document.querySelector('form')
const context = document.querySelector('.context') //个性留言
const dob = document.querySelector('.dob') //出生日期
const gender = document.querySelectorAll('[type="radio"]') //性别


const files = document.querySelector('[type=file]')


const layer = layui.layer

// 上传头像
// 点击图片触发file

btnImg.addEventListener('click', function () {
  files.click()
})

// change事件图片更换触发 调用接口 并且保存

files.addEventListener('change', function (e) {
  // 实例fd
  let fd = new FormData()
  //files是伪数组， 拿到第一个文件 文件名称 e.target.files[0]
  // console.log(e.target.files[0])
  fd.append('file', e.target.files[0])
  axios({
    method: 'post',
    url: 'http://124.223.14.236:8060/common/upload?type=images',
    data: fd,
    headers: {
      token: localStorage.getItem('token')
    }
  }).then(({ data: res }) => {
    console.log(res.data.savePath)
    btnImg.src = `http://124.223.14.236:8060/${res.data.savePath}`
  })
})



// 表单验证
// 昵称验证
function verIfy() {
  // 中文、英文、数字但不包括下划线等符号
  const regexp = /^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$/
  const flag = regexp.test(uname.value)
  if (flag) {
    return flag
  } else {
    layer.msg('请输入正确的昵称')
  }
}
uname.addEventListener('blur', verIfy)

//手机号码 正则
function codIfy() {
  const regexp = /^1[3-9]\d{9}$/
  const flag = regexp.test(cell.value)

  if (flag) {
    return flag
  } else {
    layer.msg('请输入正确的手机号')
  }
}
cell.addEventListener('blur', codIfy)

//日期验证 正则
function timeIfy() {
  const regexp = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/
  const flag = regexp.test(dob.value)

  if (flag) {
    return flag
  } else {
    return layer.msg('请输入YYYY-MM-DD格式')
  }
}
dob.addEventListener('blur', timeIfy)




// 立即修改 确认按钮
const btn = document.querySelector('[type=button]')
btn.addEventListener('click', function (e) {
  e.preventDefault()
  //获取两个表单验证函数的返回值
  const verify = verIfy()
  const codify = codIfy()
  const timeify = timeIfy()

  getUserInfo()
  // console.log(verify, codify)
  if (verify && codify && timeify) {
    // console.log(token);
    layer.msg('修改成功，即将跳转到首页',{
      time: 1500 //2秒关闭（如果不配置，默认是3秒）
    }, function(){
      location.href = './user.html'
    })

  }
})

// 封装修改表单内容的函数 并且进行本地储存
function getUserInfo() {
  axios({
    method: 'get',
    url: 'http://124.223.14.236:8060/user/getUserInfo',
    headers: {
      token: localStorage.getItem('token')
    }
  }).then(({ data: res }) => {
    // console.log(res);

    // 需要用let声明解构 下面才能重新赋值。注：需要利用对象形式赋值
    // let { address, birthday, icon, id, mobile, notes, password, username, } = res.data.userInfo
    res.data.userInfo.notes = context.value //留言
    res.data.userInfo.birthday = dob.value //出生日起
    res.data.userInfo.mobile = cell.value  //电话
    res.data.userInfo.username = uname.value //用户名
    res.data.userInfo.icon = btnImg.src  //图片
    if (gender[1].checked) { //女
      res.data.userInfo.sex = 1
    } else if (gender[0].checked) { //男
      res.data.userInfo.sex = 0
    }
    //  res.data.userInfo.sex =  gender[0].checked ? 1 : 0 //性别

    console.log(res);
    // 对象转换成json字符串 存储到本地
    const userIf = JSON.stringify(res.data)
    localStorage.setItem('token', userIf)
    // console.log(userIf);

  })
}

